<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="div-1"></div>
      </el-col>
      <el-col :span="8">
        <div class="div-2"></div>
      </el-col>
      <el-col :span="8">
        <div class="div-3"></div>
      </el-col>
    </el-row>


    <el-row :gutter="20">
      <el-col :span="4">
        <div class="div-1"></div>
      </el-col>
      <el-col :span="16">
        <div class="div-2"></div>
      </el-col>
      <el-col :span="4">
        <div class="div-3"></div>
      </el-col>
    </el-row>


    <el-row :gutter="5">
      <el-col :span="16">
        <div class="div-2"></div>
      </el-col>
      <el-col :span="8">
        <div class="div-3"></div>
      </el-col>
    </el-row>


    <el-row :gutter="10">
      <el-col :span="8">
        <div class="div-1"></div>
      </el-col>
      <el-col :span="8">
        <div class="div-2"></div>
      </el-col>
      <el-col :span="4">
        <div class="div-3"></div>
      </el-col>
      <el-col :span="4">
        <div class="div-1"></div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="6" :offset="6">
        <div class="div-1"></div>
      </el-col>
      <el-col :span="6" :offset="3">
        <div class="div-2"></div>
      </el-col>
    </el-row>

    <el-row type="flex" justify="start">
      <el-col :span="6">
        <div class="div-1"></div>
      </el-col>
      <el-col :span="6">
        <div class="div-2"></div>
      </el-col>
      <el-col :span="6">
        <div class="div-3"></div>
      </el-col>
    </el-row>

    <el-row type="flex" justify="center">
      <el-col :span="6">
        <div class="div-1"></div>
      </el-col>
      <el-col :span="6">
        <div class="div-2"></div>
      </el-col>
      <el-col :span="6">
        <div class="div-3"></div>
      </el-col>
    </el-row>

    <el-row type="flex" justify="end">
      <el-col :span="6">
        <div class="div-1"></div>
      </el-col>
      <el-col :span="6">
        <div class="div-2"></div>
      </el-col>
      <el-col :span="6">
        <div class="div-3"></div>
      </el-col>
    </el-row>

    <el-row type="flex" justify="space-between">
      <el-col :span="6">
        <div class="div-1"></div>
      </el-col>
      <el-col :span="6">
        <div class="div-2"></div>
      </el-col>
      <el-col :span="6">
        <div class="div-3"></div>
      </el-col>
    </el-row>

    <el-row type="flex" justify="space-around">
      <el-col :span="6">
        <div class="div-1"></div>
      </el-col>
      <el-col :span="6">
        <div class="div-2"></div>
      </el-col>
      <el-col :span="6">
        <div class="div-3"></div>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col class="hidden-xs-only" :xl="1" :lg="3" :md="4" :sm="6" :xs="8">
        <div class="div-"></div>
      </el-col>
      <el-col :xl="11" :lg="9" :md="8" :sm="6" :xs="4">
        <div class="div-1"></div>
      </el-col>
      <el-col :xl="11" :lg="9" :md="8" :sm="6" :xs="4">
        <div class="div-2"></div>
      </el-col>
      <el-col :xl="1" :lg="3" :md="4" :sm="6" :xs="8">
        <div class="div-3"></div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="6">
        <div class="div-2"></div>
      </el-col>
      <el-col :span="6" :push="3">
        <div class="div-2"></div>
      </el-col>
      <el-col :span="6" :pull="3">
        <div class="div-1"></div>
      </el-col>
    </el-row>

    



  </div>
</template>
<div>
  <!--
  layout布局
  span栅格占据的列数
  gutter栅格的间距
  offset栅格左侧的间距格数
  push栅格向右移动格数
  pull栅格向左移动格数
  type="flex" 设置类型为弹性布局
  justify="start"默认的左对齐
  justify="center" 居中对齐
  justify="end" 右对齐
  justify="space-between" 等间距对齐
  justify="space-around" 围绕对齐
  响应式布局：
  <768px像素：xs
  >=768px：sm
  >=992px：md
  >=1200px：lg
  >=1920px：xl
  hidden-xs-only 当视口在 xs 尺寸时隐藏
  hidden-md-only 当视口在 md 尺寸时隐藏
  -->
</div>

<script>
  import 'element-ui/lib/theme-chalk/display.css';
  export default {
    data() {
      return {

      }
    },
    components: {

    },
    methods: {

    }
  }
</script>

<style>
  .el-row {
    margin-bottom: 10px;
  }

  .div-1 {
    width: 100%;
    height: 50px;
    background-color: lightblue;
  }

  .div-2 {
    width: 100%;
    height: 50px;
    background-color: peachpuff;
  }

  .div-3 {
    width: 100%;
    height: 50px;
    background-color: thistle;
  }
</style>
